<template>
    <n-space vertical>
    <n-form
      ref="formRef"
      :model="model"
      label-placement="left"
      :label-width="160"
      class="setting-cont"
    >
    <n-form-item label="头像" >
        <UploadImg v-model="model.avatar"></UploadImg>
      </n-form-item>
      <n-form-item label="账号">
        <n-input v-model:value="model.username" disabled placeholder="Input" />
      </n-form-item>
      <n-form-item label="性别" >
        <n-select
          v-model:value="model. gender"
          placeholder="Select"
          :options=" genderOptions"
        />
      </n-form-item>
      <n-form-item label="手机" >
        <n-input v-model:value="model.phone" placeholder="Input" />
      </n-form-item>
      <n-form-item label=" " >
        <n-button type="primary" size="medium" block @click="handleSetting">
            提交
        </n-button>
      </n-form-item>
    </n-form>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'
import UploadImg from '../components/UploadImg.vue';
import { userUpdateUApi } from '../api/user';
import { useAccount } from '../store/account.js';
const  genderOptions = [
  {
    label: '男',
    value: '2'
  },
  {
    label: '女',
    value: '1'
  } 
]
const model =ref({
  username:'',
  phone:'',
  gender:'',
  avatar:''
})
const formRef = ref()
//获取用户信息
const account=useAccount()
const handleSetting = async()=>{
  console.log(model.value);
  let {_id}=account.userInfo
  let res=await userUpdateUApi(_id,model.value)
  if(res.data.code==1){
    account.userInfo={
      _id,
      ...model.value
    }
  }
}
let {username,gender,phone,avatar} = account.userInfo
model.value.username=username
model.value.gender=gender
model.value.phone=phone
model.value.avatar=avatar

</script>

<style lang="scss" scoped>
.setting-cont{
  padding-right: 140px;
}
</style>